<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约</title>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        #centertitle{
            text-align: center;
        }
        table{
            border: black solid 1px;
            margin-left: 50px;
        }
        #td{
            width: 240px;
            height: 50px;
        }
        #td1{
            width: 120px;
            text-align: center;
        }
        th{
            border: black solid 1px;
        }
        td{
            border: black solid 1px;
            width: 50px;
            height: 50px;
            text-align:center;
        }
        #im{
            float:left;
            margin-top: 5px;
            margin-left: 2px;
        }
        #re{
            float:right;
        }
        #la{
            width:300px;
            /*border:0px solid #900;*/
            padding:0px;
            overflow:hidden
        }
        .divleft{
            float:left;
            width:75px;
            font-weight:600;
            /*border:0px solid #060;*/
        }
        .divright{
            margin-top:8px;
            float:right;
            width:220px;
            /*border:0px solid #00F;*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="centertitle">
        <h1>患者预约系统</h1>
    </div>

    <div id="app">
        <table cellpadding="0px" cellspacing="0px">
            <tr>
                <th id="td">医生信息</th>
                <th id="td1" V-for="timesss in timess">{{timesss}}</th>
            </tr>
            <tr  v-for="admin in admins">
                <td>
                    <div id="la">
                        <div id="im">
                            <img :src="admin.img" class="avatar" width="70px" height="80">
                        </div>
                        <div id="re">
                            <div class="divleft">{{admin.name}}</div><br/>
                            <div class="divright">{{admin.introduction}}</div>
                        </div>
                    </div>
                </td>

                <td>
                    <el-button type="primary" plain v-if="admin.date1==1 && admin.num1-admin.count1>0" @click="appointment(admin.id,admin.account,admin.did1,admin.date11,admin.count1,admin.num1,admin.price1)">
                        <span>余号({{admin.num1-admin.count1}})</span><br>
                        <span>￥{{admin.price1}}</span>
                    </el-button>

                    <el-button type="warning" plain v-if="admin.date1==1 && admin.num1-admin.count1<=0" disabled>
                        <span>余号({{admin.num1-admin.count1}})</span><br>
                        <span>￥{{admin.price1}}</span>
                    </el-button>
                    <span v-if="admin.date1==0"></span>

                </td>
                <td>
                    <el-button type="primary" plain v-if="admin.date2==2 && admin.num2-admin.count2>0" @click="appointment(admin.id,admin.account,admin.did2,admin.date22,admin.count2,admin.num2,admin.price2)">
                        <span>余号({{admin.num2-admin.count2}})</span><br>
                        <span>￥{{admin.price2}}</span>
                    </el-button>

                    <el-button type="warning" plain v-if="admin.date2==2 && admin.num2-admin.count2<=0" disabled>
                        <span>余号({{admin.num2-admin.count2}})</span><br>
                        <span>￥{{admin.price2}}</span>
                    </el-button>
                    <span v-if="admin.date2==0"></span>
                </td>
                <td>
                    <el-button type="primary" plain v-if="admin.date3==3 && admin.num3-admin.count3>0" @click="appointment(admin.id,admin.account,admin.did3,admin.date33,admin.count3,admin.num3,admin.price3)">
                        <span>余号({{admin.num3-admin.count3}})</span><br>
                        <span>￥{{admin.price3}}</span>
                    </el-button>

                    <el-button type="warning" plain v-if="admin.date3==3 && admin.num3-admin.count3<=0" disabled>
                        <span>余号({{admin.num3-admin.count3}})</span><br>
                        <span>￥{{admin.price3}}</span>
                    </el-button>

                    <span v-if="admin.date3==0"></span>
                </td>
                <td>
                    <el-button type="primary" plain v-if="admin.date4==4 && admin.num4-admin.count4>0" @click="appointment(admin.id,admin.account,admin.did4,admin.date44,admin.count4,admin.num4,admin.price4)">
                        <span>余号({{admin.num4-admin.count4}})</span><br>
                        <span>￥{{admin.price4}}</span>
                    </el-button>
                    <el-button type="warning" plain v-if="admin.date4==4 && admin.num4-admin.count4<=0" disabled>
                        <span>余号({{admin.num4-admin.count4}})</span><br>
                        <span>￥{{admin.price4}}</span>
                    </el-button>
                    <span v-if="admin.date4==0"></span>
                </td>
                <td>
                    <el-button type="primary" plain v-if="admin.date5==5 && admin.num5-admin.count5>0" @click="appointment(admin.id,admin.account,admin.did5,admin.date55,admin.count5,admin.num5,admin.price5)">
                        <span>余号({{admin.num5-admin.count5}})</span><br>
                        <span>￥{{admin.price5}}</span>
                    </el-button>

                    <el-button type="warning" plain v-if="admin.date5==5 && admin.num5-admin.count5<=0" disabled>
                        <span>余号({{admin.num5-admin.count5}})</span><br>
                        <span>￥{{admin.price5}}</span>
                    </el-button>
                    <span v-if="admin.date5==0"></span>
                </td>
                <td>
                    <el-button type="primary" plain v-if="admin.date6==6 && admin.num6-admin.count6>0" @click="appointment(admin.id,admin.account,admin.did6,admin.date66,admin.count6,admin.num6,admin.price6)">
                        <span>余号({{admin.num6-admin.count6}})</span><br>
                        <span>￥{{admin.price6}}</span>
                    </el-button>

                    <el-button type="warning" plain v-if="admin.date6==6 && admin.num6-admin.count6<=0" disabled>
                        <span>余号({{admin.num6-admin.count6}})</span><br>
                        <span>￥{{admin.price6}}</span>
                    </el-button>
                    <span v-if="admin.date6==0"></span>
                </td>
                <td>
                    <el-button type="primary" plain v-if="admin.date7==7 && admin.num7-admin.count7>0" @click="appointment(admin.id,admin.account,admin.did7,admin.date77,admin.count7,admin.num7,admin.price7)">
                        <span>余号({{admin.num7-admin.count7}})</span><br>
                        <span>￥{{admin.price7}}</span>
                    </el-button>

                    <el-button type="warning" plain v-if="admin.date7==7 && admin.num7-admin.count7<=0" disabled>
                        <span>余号({{admin.num7-admin.count7}})</span><br>
                        <span>￥{{admin.price7}}</span>
                    </el-button>
                    <span v-if="admin.date7==0"></span>
                </td>
            </tr>
        </table>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                timess:[],
                admins:{},
                message: {},
            },
            created(){
                this.schedulinit();
                this.times();
            },
            methods:{
                schedulinit() {
                    axios.post("/ManaginePrivilegesController/selectSectionDoctors2").then(resp=>{
                        this.admins=resp.data.data;
                        console.log(this.admins);
                    });
                },

                //获得表头时间
                times(){
                    axios.post("/ManaginePrivilegesController/getCurrentTimes").then(resp=>{
                        this.timess=resp.data.data;
                        console.log(this.timess);
                    });
                },
                appointment(id,account,did,date,count,num,price){
                    this.message.id=id;
                    this.message.did=did;
                    this.message.date=date;
                    this.message.count=count;
                    this.message.num=num;
                    this.message.account=account;
                    this.message.price=price;
                    axios.post("/AppointmentController/addVisitCount",this.message).then(resp=>{
                        location.href="/appointment/userinfo.html";
                    });
                }
            }
        });
    </script>
</body>
</html>